import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import "../styles/layout.scss";
import { Footer_Bar } from "../utils/data";
import { useEffect } from "react";
import {useLocation} from "react-router-dom"
export default function Layout() {
  const {pathname}=useLocation();
  return (
    <div className="layout">
      <main>
        <Outlet />
      </main>
     <footer>
      {
        Footer_Bar.map((v)=>{
          return  <NavLink key={v.path} to={v.path}
          style={{color:(v.path==pathname)?'red':''}}
          >
          <i className={`iconfont ${v.icon}`}/>
          <span>{v.title}</span>
        </NavLink>
        })
      }
     </footer>
    </div>
  );
}
